<template>
	<view class="wrap">
		<image class="bgs" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/1.png" mode="widthFix"></image>
		<!-- <headers :enable="enable" title="账号列表" /> -->
		<view class="content">
			<view class="info">
				<image class="photo" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/27.png" mode="widthFix"></image>
				<view class="cont">
					<view class="name">
						深海的鱼
					</view>
					<view class="ids">
						ID：12345678
					</view>
				</view>
			</view>
			
				<view class="sticky">
					<u-tabs :is-scroll="true" bg-color="none" bar-width="96" inactive-color='#666666' bar-height="5"
						active-color="#333" :list="list" :current="current" @change="change"></u-tabs>
				</view>
				
				<view class="list">
					<view class="total">
						<view class="left">
							<text>20</text>
							个已托管
						</view>
						
						<view class="right">
							<text>5</text>
							个已掉线
						</view>
					</view>
					<list />
				</view>
		
			
			
		</view>
	
	</view>

</template>
<script>
	import headers from '@/components/headnavbar/index.vue'
	import list from './list.vue'

	export default {
		components: {
			headers,
			list,
		
		},
		data() {
			return {
				enable: false,
				list: [{
					name: '抖音账号'
				}, {
					name: '快手账号'
				}, {
					name: '微信账号'
				}],
				current: 0
			};
		},
		onPageScroll(e) {
			this.enable = e.scrollTop > 50 ? true : false
		},
		onLoad() {

		},
		methods: {
			change(index) {
				this.current = index;
			},
		}
	};
</script>
<style lang="scss" scoped>

	.content {
		padding: 0 32rpx 32rpx;
		/deep/ .u-sticky-wrap {
			background: none !important;
		}
		
		/deep/ .u-tab-bar {
			background: #3757FF !important;
		}
		.list{
			background: #FFFFFF;
			border-radius: 13rpx 13rpx 0rpx 0rpx;
			padding: 24rpx 32rpx;
			margin-top: 20rpx;
			.total{
				background: #f4f7ff;
				height: 70rpx;
				border-radius: 11rpx ;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				font-family: PingFang SC-Light, PingFang SC;
				font-weight: 300;
				color: #999999;
				line-height: 28rpx;
				.left{
					display: flex;
					align-items: center;
					justify-content: center;
					height: 33rpx;
					flex: 1;
					border-right: 1rpx solid rgba(0,0,0,0.23);
					text{
						font-size: 36rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #3757FF;
						line-height: 42rpx;
						padding-right: 16rpx;
					}
				}
				.right{
					display: flex;
					align-items: center;
					justify-content: center;
					flex: 1;
					text{
						font-size: 36rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #666666;
						line-height: 42rpx;
						padding-right: 16rpx;
					}
				}
			}
		}

		.info {
			width: 686rpx;
			margin: 20rpx auto 10px;
			height: 167rpx;
			background: url("https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/36.png") no-repeat;
			background-size: cover;
			display: flex;
			align-items: center;
			.photo{
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin-left: 50rpx;
				
			}
			.cont{
				flex: 1;
				margin-left: 28rpx;
	
				.name{
					font-size: 32rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 38rpx;
					margin:10rpx 0 15rpx 0;
				}
				.ids{
					display: inline-flex;
					font-size: 19rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #6171FF;
					line-height: 22rpx;
					background: #ecf1ff;
					border-radius: 30rpx;
					padding: 4rpx 23rpx;
				}
				
			}
		}
	}
</style>
